<template>
  <div>
    <HeadBar
      title="我的地址"
      :isShowLeftIcon="true"
      @isShowComponent="showHandler"
    ></HeadBar>
    <div style="height: 50px"></div>
    <!-- <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      @change-area="checkedHandler"
    >
    </van-address-edit> -->

    <van-address-edit
      disable-area
      @click-area="showPopup"
      :area-placeholder="copyArr.join('/')"
      ref="vae"
    >
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '60%' }"
        closeable
        duration="0.3"
      >
        <span class="left-text">请选择所在区域</span>
        <div style="height:20px"></div>

        
        <van-area :area-list="areaList"  columns-num="1"
        @change="getValHandler"
        @confirm="confirmHandler"
        @cancel="cancelHandler"
        value="110101"/>
      </van-popup>
    </van-address-edit>
  </div>
</template>

<script>
// import { Toast } from "vant";
import HeadBar from "@/components/HeadBar";
import { getareaList } from "@/api/addr.js";
export default {
  name:"deitDrr",
  data() {
    return {
      show: false,
      areaList: {}, // 数据格式
      province_list:{},//省数据
      searchResult: [],
      id:null, //拼接好的字符串
      newId:null,//发送的id
      currentCity:null,
      arr:[],//储存数据
      copyArr:[],
      ids:{
        
      }
    };
  },
  created() {
    
    this.getareaListhanler();
    
  },
  methods: {
    // change改变 获取 值
    getValHandler(value){
      this.id = value.$parent.code; // 获取6位数字id
      this.currentCity = this.areaList.province_list[this.id]; // 获取6位数对应的城市
      let o = this.province_list.filter(item=>item.name===this.currentCity)[0];//获取城市对应的对象
      this.newId = o.id; // 获取对象对应的id
    },
    // 点击确定
    confirmHandler(){
      this.getareaListhanler(this.newId);
      this.arr.push(this.currentCity);
      if(this.arr.length==1){
        console.log("省");
      }else if(this.arr.length==2){
        console.log("市");
      }else if(this.arr.length==3){
        console.log("县");
       console.log(this.arr.join("/"));
       this.show=false;
        this.copyArr = this.arr;
       this.arr = []
     }
    //   // 再次点击的时候;
      console.log("ConfirmHandler");
    },
    // 关闭弹框
    cancelHandler(){
      console.log("cancelHandler");
    },
    // 显示弹框
    showPopup() {
      this.show = true;
      this.arr = [];
      this.id = null;
      this.newId = 1;
      this.getareaListhanler()
    },

    showHandler($event) {
      this.isShowAddr = $event;
      this.$emit("SendOff", $event);
    },
  
    onChangeDetail(val) {
      console.log(val);
      if (val) {
        this.searchResult = [
          {
            name: "黄龙万科中心",
            address: "杭州市西湖区",
          },
        ];
      } else {
        this.searchResult = [];
      }
    },
    // 发送请求的数据,不传id默认是请求省的数据;
    async getareaListhanler(id=1) {
      const res = await getareaList({
        parentId: id,
      });

      let arr = res.data.data;
      this.province_list = arr;//原始数据
        // 使用的数据类型
      let obj = { province_list: {}, city_list: {}, county_list: {} };
      for (let key in arr) {
        obj.province_list[arr[key].id.toString().padEnd(6, 0)] = arr[key].name;
      }
      // 赋值
      this.areaList = obj;
      
    },
  },
  components: {
    HeadBar,
  },
};
</script>

<style scoped lang="scss">
.addr-wrap {
  width: 100vw;
  min-height: 100vh;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
}
.left-text {
  font-size: 30px;
  color: #666;
  padding-left: 20px;
  padding-top: 20px;
}
::v-deep .van-popup {
  border-top-left-radius: 32px !important;
  border-top-right-radius: 32px !important;
}
</style>
